import 'dart:math';

import 'package:flutter/material.dart';
import 'package:intro_slider/slide_object.dart';
import 'package:intro_slider/intro_slider.dart';
import 'package:intro_slider/slide_object.dart';
import 'package:intro_slider/scrollbar_behavior_enum.dart';
import 'package:kasax_demos2/commons/common_test_datas.dart';
import 'package:intro_slider/dot_animation_enum.dart';

/// https://pub.flutter-io.cn/packages/intro_slider
/// https://juejin.cn/post/6844903810972778510
/// Custom config
class IntroSliderDemo3 extends StatefulWidget {
  const IntroSliderDemo3({Key? key}) : super(key: key);

  @override
  _IntroSliderDemo3State createState() => _IntroSliderDemo3State();
}

class _IntroSliderDemo3State extends State<IntroSliderDemo3> {
  List<Slide> _slides = [];
  List<Widget> _customTabs = [];

  @override
  void initState() {
    var textStyle = TextStyle(
        color: Color(0xff3da4ab),
        fontSize: 30,
        fontWeight: FontWeight.bold,
        fontFamily: 'RobotoMono');
    var descriptionStyle = TextStyle(
        color: Color(0xfffe9c8f),
        fontSize: 20.0,
        fontStyle: FontStyle.italic,
        fontFamily: 'Raleway');
    _slides.add(Slide(
        title: "SCHOOL",
        description:
            "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.",
        maxLineTitle: 2,
        styleTitle: textStyle,
        styleDescription: descriptionStyle,
        marginDescription:
            EdgeInsets.only(left: 20.0, right: 20.0, top: 20.0, bottom: 70.0),
        backgroundImage: TestDatas.genRandomPosterImg(),
        directionColorBegin: Alignment.topLeft,
        directionColorEnd: Alignment.bottomRight));

    _slides.add(Slide(
        styleTitle: textStyle,
        styleDescription: descriptionStyle,
        title: "MUSEUM",
        description:
            "Ye indulgence unreserved connection alteration appearance",
        backgroundImage: TestDatas.genRandomPosterImg(),
        directionColorBegin: Alignment.topLeft,
        directionColorEnd: Alignment.bottomRight));
    _slides.add(Slide(
        styleTitle: textStyle,
        styleDescription: descriptionStyle,
        title: "COFFEE SHOP",
        maxLineTextDescription: 3,
        description:
            "Much evil soon high in hope do view. Out may few northward believing attempted. Yet timed being songs marry one defer men our. Although finished blessing do of",
        backgroundImage: TestDatas.genRandomPosterImg(),
        directionColorBegin: Alignment.topLeft,
        directionColorEnd: Alignment.bottomRight));

    for (int i = 0; i < _slides.length; i++) {
      var slide = _slides[i];
      _customTabs.add(Container(
        width: double.infinity,
        height: double.infinity,
        child: Container(
          margin: EdgeInsets.only(bottom: 60.0, top: 60.0),
          child: ListView(
            children: [
              GestureDetector(
                child: AspectRatio(
                  aspectRatio: 16 / 9,
                  child: Image.asset(
                    "${slide.backgroundImage}",
                    width: 200,
                    height: 200,
                    fit: BoxFit.cover,
                  ),
                ),
              ),
              Container(
                margin: EdgeInsets.only(top: 20),
                child: Text(
                  "${slide.title}",
                  style: slide.styleTitle,
                  textAlign: TextAlign.center,
                ),
              ),
              Container(
                margin: EdgeInsets.only(top: 20),
                child: Text(
                  "${slide.description}",
                  style: slide.styleDescription,
                  maxLines: 5,
                  overflow: TextOverflow.ellipsis,
                ),
              ),
            ],
          ),
        ),
      ));
    }
    super.initState();
  }

  ButtonStyle myBtnStyle() {
    return ButtonStyle(
      shape: MaterialStateProperty.all<OutlinedBorder>(StadiumBorder()),
      backgroundColor: MaterialStateProperty.all<Color>(Color(0x33F3B4BA)),
      overlayColor: MaterialStateProperty.all<Color>(Color(0x33FFA8B0)),
    );
  }

  @override
  Widget build(BuildContext context) {
    return IntroSlider(
      slides: _slides,

      // skip button
      renderSkipBtn: Icon(
        Icons.skip_next,
        color: Color(0xffffcc5c),
      ),
      skipButtonStyle: myBtnStyle(),

      // next button
      renderNextBtn: Icon(
        Icons.navigate_next,
        color: Color(0xffffcc5c),
      ),
      nextButtonStyle: myBtnStyle(),

      // done button
      renderDoneBtn: Icon(
        Icons.done,
        color: Color(0xffffcc5c),
      ),
      doneButtonStyle: myBtnStyle(),

      // Dot indicator
      colorDot: Color(0x33FFA8B0),
      typeDotAnimation: dotSliderAnimation.SIZE_TRANSITION,
      sizeDot: 13.0,

      // tabs
      listCustomTabs: _customTabs,
      backgroundColorAllSlides: Colors.white,
      refFuncGoToTab: (index) {},
      onTabChangeCompleted: (index) {},
      // Behavior
      scrollPhysics: BouncingScrollPhysics(),

      // scrollbar
      verticalScrollbarBehavior: scrollbarBehavior.SHOW_ALWAYS,
    );
  }
}
